import React, { FC, useState, useEffect } from 'react';
import { Layout } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
} from '@ant-design/icons';
import Menu from 'components/Menu'
import { connect } from 'react-redux';
import { API } from 'App.d'
import { RootState } from 'store';
import DynamicRoutes from 'components/DynamicRoutes'
import { getRoutes } from 'store/actions/user';
import Breadcrumb from 'components/BreadCrumb';
const { Header, Sider, Content } = Layout;


interface ILayoutsProps {
  children?: React.ReactNode;
  routes: Array<API.IRoute>;
  dispatch: Function;
}

const Layouts: FC<ILayoutsProps> = (props) => {
  const [collapsed, setCollapsed] = useState<boolean>(false)
  const toggle = () => setCollapsed(!collapsed)

  useEffect(() => { //获取动态路由
    props.dispatch(getRoutes())
  }, [1])
  console.log(props.routes);


  return (
    props.routes.length === 0 ? null :
      (
        <div style={{ height: '100%' }}>
          <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}>
              <div className="logo" />
              <Menu routes={props.routes} />
            </Sider>
            <Layout className="site-layout">
              <Header className="site-layout-background" style={{ padding: 0 }}>
                {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                  className: 'trigger',
                  onClick: toggle,
                })}
              </Header>
              <Content
                className="site-layout-background"
                style={{
                  margin: '24px 16px',
                  padding: 24,
                  minHeight: 280,
                }}
              >
                {/* 面包屑 */}
                <Breadcrumb />
                {/* 需要routes请求回来再渲染, 否则直接跳到404 */}
                {props.routes.length > 0 ? <DynamicRoutes routes={props.routes}></DynamicRoutes> : null}
              </Content>
            </Layout>
          </Layout>
        </div>
      )
  )
};

export default connect(
  (state: RootState) => ({ routes: state.user.routes }),
)(Layouts)
